<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN"> 
<head> 
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>首页</title>
	<!-- 常规css -->
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
	<link th:href="@{chart/Chart.css}" rel="stylesheet" />
    <!-- 项目css -->
    <link th:href="@{css/layout.css}" rel="stylesheet" />
</head> 
<body>
	<!-- 侧边导航栏 -->
	<div th:replace="aframe::sideNavigation"></div>
	
	<!-- 主页面 -->
	<div class="content" style="padding:0px">
		<!-- 顶部导航栏 -->
		<div th:replace="aframe::topNavigation"></div>
		<!-- 内容 -->

		<div style="margin: 20px">
			<div role="tabpanel" class="tab-pane active col-lg-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>近一周用户增长量&nbsp;&nbsp;</h4>
					</div>
					<div class="panel-body">
						<canvas id="chart1" height="400" width="450"></canvas>
					</div>
				</div>
			</div>

			<div role="tabpanel" class="tab-pane active col-lg-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>近一周销售额&nbsp;&nbsp;</h4>
					</div>
					<div class="panel-body">
						<canvas id="chart2" height="400" width="450"></canvas>
					</div>
				</div>
			</div>
		</div>





		<!-- end 内容 -->
	</div>
	<!-- end 主页面 -->


	<!-- 模态框: 修改密码 -->
	<div th:replace="aframe::modifyPwd"></div>


<!-- 常规js -->
<script th:src="@{js/jquery-3.4.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<!-- 模板js -->
<script th:replace="aframe::js-highlight"></script>
<!-- 项目js -->
<script th:src="@{js/md5.js}"></script>
<script th:src="@{js/setpwd.js}"></script>
<!-- 图表js -->
<script th:src="@{chart/Chart.min.js}"></script>

	<script>
		var dateList;
		var population;
		var sales;
		$.ajax({
			url : "chart",
			async : true,
			type : "GET",
			// 成功后开启模态框
			success : function(res) {
				dateList = res.dates;
				population = res.population;
				sales = res.sales;

				var ctx = document.getElementById('chart1').getContext('2d');
				var chart = new Chart(ctx, {
					// The type of chart we want to create
					type: 'line',

					// The data for our dataset
					data: {
						labels: dateList,
						datasets: [{
							label: '用户人数 (人)',
							backgroundColor: 'rgb(255, 99, 132, 0.4)',
							borderColor: 'rgb(255, 99, 132, 1)',
							data: population
						}]
					},

					// Configuration options go here
					options: {}
				});

				var ctx = document.getElementById('chart2');
				var myChart = new Chart(ctx, {
					type: 'bar',
					data: {
						labels: dateList,
						datasets: [{
							label: '单日销售金额 (元)',
							data: sales,
							backgroundColor: [
								'rgba(255, 99, 132, 0.2)',
								'rgba(54, 162, 235, 0.2)',
								'rgba(255, 206, 86, 0.2)',
								'rgba(75, 192, 192, 0.2)',
								'rgba(153, 102, 255, 0.2)',
								'rgba(255, 159, 64, 0.2)',
								'rgba(122, 82, 75, 0.2)'
							],
							borderColor: [
								'rgba(255, 99, 132, 1)',
								'rgba(54, 162, 235, 1)',
								'rgba(255, 206, 86, 1)',
								'rgba(75, 192, 192, 1)',
								'rgba(153, 102, 255, 1)',
								'rgba(255, 159, 64, 1)',
								'rgba(122, 82, 75, 1)'
							],
							borderWidth: 1
						}]
					},
					options: {
						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true
								}
							}]
						}
					}
				});
			},
			error : function(res) {
				alert("连接失败");
			},
			dataType : "json"
		});
	</script>

</body> 
</html> 

